import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card } from 'antd';
import PateoTable from '../../../components/common/PateoTable';
import PateoAuthButtons from '../../../components/common/PateoAuthButtons';
import PropTypes from 'prop-types';
import styles from '../../../components/common/PateoTable/TableList.less';
import { routerRedux } from 'dva/router';
import moment from 'moment';

@connect((state: any) => ({
  messageChannel: state.messageChannel,
  loading: state.loading.effects['messageChannel/getFetchPage'],
}))
export default class MessageChannelManagement extends PureComponent<any, any> {
  static contextTypes = {
    permissions: PropTypes.array,
  };

  constructor(props: any) {
    super(props);
    this.state = {
      list: [],
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'messageChannel/getFetchPage',
      payload: { url: '/message/channel/findAllChannel' },
      callback: (response: any) => {
        this.setState({ list: response.data });
      },
    });
  }

  handleConfig = (record: any) => {
    const { channelCd } = record;
    const { dispatch } = this.props;
    sessionStorage.setItem('channelKey', channelCd);
    dispatch(routerRedux.push({ pathname: '/messageCenter/messageChannelConfig' }));
  };

  render() {
    const {
      loading,
      dispatch,
      location: { pathname = '/' },
    } = this.props;
    const { list } = this.state;
    const columns = [
      {
        title: '渠道编号',
        dataIndex: 'channelCd',
      },
      {
        title: '渠道类型',
        dataIndex: 'channelName',
      },
      {
        title: '创建人',
        dataIndex: 'createBy',
      },
      {
        title: '创建时间',
        dataIndex: 'createDate',
        render: (text: any) => (text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : null),
      },
      {
        title: '修改时间',
        dataIndex: 'updateDate',
        render: (text: any) => (text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : null),
      },
      {
        title: '操作',
        dataIndex: '操作',
        width: 230,
        render: (text: any, record: any) => {
          const btns = [
            {
              title: '配置',
              key: 'config',
              auth: 'messageChannel_doSet',
              disabled: ![1, 2, 3, 4, 5, 9].includes(record.channelCd),
              onConfirm: () => this.handleConfig(record),
            },
          ];
          return <PateoAuthButtons btns={btns} max={2} pathname={pathname} />;
        },
      },
    ];
    const tableProps = {
      columns,
      rowKey: (record: any) => record.channelCd,
      dataSource: list,
      loading,
      pagination: false,
      scroll: { x: 'max-content' },
    };
    return (
      <div>
        <Card title={'推送渠道配置'} bordered={false} className={styles.standardTable}>
          <PateoTable tableProps={tableProps} dispatch={dispatch} />
        </Card>
      </div>
    );
  }
}
